import { async } from 'q';
import { setTimeout } from 'timers';
<!--
 * @Author: wangding
 * @Date: 2020-10-28 11:21:52
 * @LastEditTime: 2020-10-30 10:59:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\dictionary\tree.vue
-->
<template>
    <div class="tree-main-box-com">
        <el-input
        :placeholder="$t('common.ple-insert-keyword')"
        v-model="filterText">
        </el-input>
        <el-tree
        :props="props"
        :load="loadNode"
        lazy
        :filter-node-method="filterNode"
        ref="tree"
        @node-click="handleNodeClick"
        >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span style="color:#000;">{{ node.label }}</span>
            <el-popover
            placement="bottom"
            width="50"
            trigger="hover"
            :open-delay='500'
            style="margin-left:10px;"
            >
                <i class="el-icon-s-tools" style="color:#000;" slot="reference"></i>
                <div class="flex-y-tree">
                    <a href="javascript:;" @click='()=>{dialogVisible = true;treeId=data.sid}' v-if='data.dictType == 2 ? false:true'><i class="el-icon-circle-plus"></i>{{$t('add')}}</a>
                    <a href="javascript:;" @click='showEditModal(data,node)'><i class="el-icon-edit"></i>{{$t('edit')}}</a>
                    <a href="javascript:;" @click='dictionaryTypeDeleteEntity(node,data)'><i class="el-icon-delete"></i>{{$t('delete')}}
                    </a>
                </div>
            </el-popover>
        </span>
        </el-tree>
        <el-dialog
            :title="$t('dictionary.dictionaryTypeAdd.title')"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="()=>{dialogVisibleAdd = false}">
            <el-form ref="form" :model="form" label-width="80px" >
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('name')" prop="dictName" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.dictName" :placeholder="$t('index.selectStates')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('dictionary.dictionaryTypeAdd.typeName')" prop="dictType" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.dictType" filterable :placeholder="$t('common.info.pl-insert-content')" :clearable='true'>
                                <el-option
                                key="1"
                                :label="$t('dictionary.dictionaryTypeAdd.typeName.value1')"
                                value="1">
                                </el-option>
                                <el-option
                                key="2"
                                :label="$t('dictionary.dictionaryTypeAdd.typeName.value2')"
                                value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('dictionary.dictionaryTypeAdd.dictCode')" prop="dictCode" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.dictCode" :placeholder="$t('common.info.pl-insert-content')" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('remark')" prop="remark" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.remark" :placeholder="$t('common.info.pl-insert-content')" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :title="$t('dictionary.dictionaryTypeAdd.title')"
            :visible.sync="dialogVisibleEdit"
            width="30%"
            :before-close="()=>{dialogVisibleEdit = false}">
            <el-form ref="formEdit" :model="formEdit" label-width="80px" >
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('name')" prop="dictName" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="formEdit.dictName" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('dictionary.dictionaryTypeAdd.typeName')" prop="dictType" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="formEdit.dictType" filterable :placeholder="$t('index.selectStates')" :clearable='true'>
                                <el-option
                                key="1"
                                :label="$t('dictionary.dictionaryTypeAdd.typeName.value1')"
                                value="1">
                                </el-option>
                                <el-option
                                key="2"
                                :label="$t('dictionary.dictionaryTypeAdd.typeName.value2')"
                                value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('dictionary.dictionaryTypeAdd.dictCode')" prop="dictCode" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="formEdit.dictCode" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('remark')" prop="remark" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-input v-model="formEdit.remark":placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('menu.pName')" prop="pid" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-cascader  v-model="formEdit.pid" :props="propsSelect"  ref='cascaderSelect' @change='cascaderChange'></el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleEdit = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="editDictionary('formEdit')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
let id = 0;
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            filterText:'',
            props: {
                label: 'dictName',
                children: 'zones',
                isLeaf: (data,node) =>{ return data.dictType == 1 ? false:true}
            },
            treeNode:'',
            treeResolve:'',
            dialogVisible:false,
            form:{
                dictName:'',
                dictType:'',
                dictCode:'',
                remark:'',
                treeId:''
            },
            formEdit:{
                dictName:'',
                dictType:'',
                dictCode:'',
                remark:'',
                treeId:'',
                pid:''
            },
            dialogVisibleEdit:false,
            propsSelectValue:[],
            propsSelectValueName:[],
            isShowAddressInfo:true
        };
    },
    computed: {
        propsSelect(){
            return {
                lazy: true,
                lazyLoad:this.loadNodeSelect,
                label: 'dictName',
                children: 'zones',
                value:'sid',
                checkStrictly: true
            }
        },
        
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        cascaderChange(){
            this.propsSelectValueName = ['',this.$refs.cascaderSelect.getCheckedNodes()[0].data.dictName]
        },
        showEditModal(data,node){
            this.dialogVisibleEdit = true
            this.treeId=data.sid
            this.propsSelectValueName = []
            this.formEdit.pid = []
            this.returnName(node)
            
            this.formEdit.pid.pop()
            this.propsSelectValueName = this.propsSelectValueName.reverse()
            this.propsSelectValueName.pop()
            this.formEdit.dictName = data.dictName
            this.formEdit.dictType = data.dictType
            this.formEdit.dictCode = data.dictCode
            this.formEdit.remark = data.remark
            this.formEdit.treeId = data.sid
            this.$nextTick(() =>{
                this.$refs.cascaderSelect.inputValue = this.propsSelectValueName.join(' / ')
            })
        },
        returnName(node){
            if(node.data){
                this.propsSelectValueName.push(node.data.dictName)
                this.formEdit.pid = [node.data.sid,...this.formEdit.pid]
                if(node.parent.data){
                    this.returnName(node.parent)
                }
            }
        },
        save(formName){
            console.log(formName);
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.addDictionary()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        saveEdit(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.editDictionary()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async editDictionary(){
            let res = await this.API.dictionaryTypeEditEntity(
                {
                    dictName: this.formEdit.dictName,
                    dictType: this.formEdit.dictType,
                    dictCode: this.formEdit.dictCode,
                    remark: this.formEdit.remark,
                    pName: this.propsSelectValueName[this.propsSelectValueName.length-1],
                    pid: this.formEdit.pid[this.formEdit.pid.length-1],
                    id: this.formEdit.treeId
                }
            )
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.loadNode(this.treeNode,this.treeResolve)
                this.dialogVisibleEdit = false
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }

        },
        async addDictionary(){
            let res = await this.API.dictionaryTypeAddEntity(Object.assign({},this.form,{pid:this.treeId}))
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.loadNode(this.treeNode,this.treeResolve)
                this.dialogVisible = false
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async dictionaryTypeDeleteEntity(node,data){
            let res = await this.API.dictionaryTypeDeleteEntity({
                id:data.sid
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.loadNode(this.treeNode,this.treeResolve)
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        handleNodeClick(data){
            this.$emit('uploadPackage',data)
        },
        handleNodeClickRight(event,data,node){
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.dictName.indexOf(value) !== -1;
        },
        async loadNode(node, resolve) {
            
            if (node.level === 0) {
                this.treeNode = node
                this.treeResolve = resolve
                this.treeNode.childNodes = [];
                return resolve([{ dictName: this.$t('system-dictionary'),sid:'0',dictType:'1'}]);

            }
            if (node.level >= 1){
                let res = await this.API.dictionaryTypeGetByParentId({
                    pid:node.data.sid
                })
                return resolve(res);
            }
        },
        async loadNodeSelect(node, resolve){
            if (node.level === 0) {
                return resolve([{ dictName: this.$t('system-dictionary'),sid:'0',dictType:'1'}]);
            }
            if (node.level >= 1){
                let res = await this.API.dictionaryTypeGetByParentId({
                    pid:node.data.sid
                })
                return resolve(res);
            }
        }
    },
};
</script>

<style  lang="less">
    .tree-main-box-com{
        font-size: 12px;
        width: 180px;
        overflow-x: scroll;
        overflow-y: scroll;
        height: 100%;
        background-color: #fff;
        .el-tree-node__label {
            color: #000 !important;
        }
        .el-tree>.el-tree-node{
            min-width: 100%;
            display: inline-block !important;
        }
        
    }
    .flex-y-tree{
            display: flex;
            flex-direction: column;
            a{
                display: block;
                margin-right: 5px;
                margin-bottom: 5px;
            }
        }
    .el-popover{
        min-width: auto !important;
    }    
</style>
